<template>
  <div>
    <ul class="steps">
      <li
          v-for="item in SetData"
          :key="item.name"
          :class="{active:item.step}"
      >{{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>


export default {
  name: "Steps",
  data: function () {
    return {
      SetData: [
        {step: false, name: "立案阶段"},
        {step: false, name: "调查取证阶段"},
        {step: false, name: "处罚告知阶段"},
        {step: false, name: "处罚决定阶段"},
        {step: false, name: "执行阶段"},
        {step: false, name: "结案阶段"},
      ],
    };

  },
  created() {
      this.light();
  },
  methods: {
    light() {
      let isPass = JSON.parse(sessionStorage.getItem("isPass") || "{}");
      console.log(isPass)
      for (let index in isPass) {
        if (isPass[index] == 7000) {
          continue;
        }
        this.SetData[(isPass[index] / 1000) - 1].step = true;
      }
    }
  },
};
</script>

<style scoped>
.steps {
  position: relative;
  margin-bottom: 30px;
  counter-reset: step; /*创建步骤数字计数器*/
}

/*步骤描述*/
.steps li {
  list-style-type: none;
  font-size: 12px;
  text-align: center;
  width: 15%;
  position: relative;
  float: left;
}

/*步骤数字*/
.steps li:before {
  display: block;
  content: counter(step); /*设定计数器内容*/
  counter-increment: step; /*计数器值递增*/
  width: 32px;
  height: 32px;
  background-color: #777;
  line-height: 32px;
  border-radius: 32px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  font-weight: 700;
  margin: 0 auto 8px auto;
}

/*连接线*/
.steps > li:not(:last-child)::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background-color: #777;
  position: absolute;
  left: 63%;
  top: 15px;
}


/*将当前完成的步骤数字变蓝*/
.steps li.active:before {
  background-color: #00ccff;
}
</style>